<template>
  <div class="my">
    <!-- 头部区域 -->
    <div class="top">
      <!-- 用户名,签名,图片 -->
      <div class="main">
        <div class="wangm">{{ userInfo.nickname }}</div>
        <div class="qianm">{{ userInfo.intro }}</div>
        <div class="imgMe">
          <img
            :src="userInfo.avatar"
            alt=""
            @click="$router.push('/message')"
          />
        </div>

        <!-- 答题区域 -->
        <div class="count">
          <div class="item zuo">
            <div class="shuz">
              {{ userInfo.submitNum }}
            </div>
            <div class="leij">
              累计答题
            </div>
          </div>
          <div class="item">
            <div class="shuz">
              {{ userInfo.systemMessages }}
            </div>
            <div class="leij">
              收藏题目
            </div>
          </div>
          <div class="item">
            <div class="shuz">
              {{ userInfo.errorNum }}
            </div>
            <div class="leij">
              我的错题
            </div>
          </div>
          <div class="item you">
            <div class="shuz">
              {{ Math.round((userInfo.errorNum / userInfo.submitNum) * 100) }}%
            </div>
            <div class="leij">
              正确率
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的岗位 -->
    <div class="gangw" @click="$router.push('/gangw')">
      <van-cell :value="userInfo.position" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont  iconicon_mine_gangwei gang"></i>
          <span class="custom-title cot">我的岗位</span>
        </template>
      </van-cell>
    </div>

    <!-- 面经数据 -->

    <div class="mianj">
      <h6>面经数据</h6>
      <div class="item">
        <span v-if="userInfo.shareData"
          >昨日阅读 <i>+{{ userInfo.shareData.comment.yesterday }}</i></span
        >
        <div class="shuzi" v-if="userInfo.shareData">
          {{ userInfo.shareData.comment.total }}
        </div>
        <div class="zongs">阅读总数</div>
      </div>

      <div class="item">
        <span v-if="userInfo.shareData"
          >昨日获赞 <i>+{{ userInfo.shareData.star.yesterday }}</i></span
        >
        <div class="shuzi" v-if="userInfo.shareData">
          {{ userInfo.shareData.star.total }}
        </div>
        <div class="zongs">获赞总数</div>
      </div>

      <div class="item">
        <span v-if="userInfo.shareData"
          >昨日新增 <i>+{{ userInfo.shareData.read.yesterday }}</i></span
        >
        <div class="shuzi" v-if="userInfo.shareData">
          {{ userInfo.shareData.read.total }}
        </div>
        <div class="zongs">评论总数</div>
      </div>
    </div>

    <!-- 底部区域 -->
    <div class="footer" v-if="userInfo">
      <van-cell
        :value="userInfo.correctQuestions.length"
        :border="false"
        is-link
      >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont iconicon_mine_mianjing mian"></i>
          <span class="custom-title mete">我的面筋分享</span>
        </template>
      </van-cell>
      <van-cell :value="userInfo.systemMessages" :border="false" is-link @click="$router.push('/xiaoxi')">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont iconicon_mine_xiaoxi xiao"></i>
          <span class="custom-title mete">我的消息</span>
        </template>
      </van-cell>
      <van-cell
        :value="userInfo.collectQuestions.length"
        :border="false"
        is-link
      >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont iconicon_mine_tikushoucang ti"></i>
          <span class="custom-title mete">收藏的题库</span>
        </template>
      </van-cell>
      <van-cell
        :value="userInfo.collectArticles.length"
        :border="false"
        is-link
      >
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont iconicon_mine_qiyeshoucang qi"></i>
          <span class="custom-title mete">收藏的企业</span>
        </template>
      </van-cell>
      <van-cell :value="userInfo.errorQuestions.length" :border="false" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <i class="iconfont iconicon_mine_cuoti cuo"></i>
          <span class="custom-title mete">我的错题</span>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
// 特别注意 因为初始化数据,网络的好坏有时数据加载不出来,需要在所需要渲染数据的地方加上v-if="userInfo"
import { mapState, mapActions } from 'vuex'
export default {
  data () {
    return {}
  },
  computed: {
    ...mapState({
      userInfo: state => state.userInfo
    })
  },
  methods: {
    ...mapActions(['SETUSERINFO'])
  },
  created () {
    // // 打开页面时,判断用户是否登录(判断有没有token,没有就提示登录)
    // const loginInfo = getLocal('token')
    // if (!loginInfo || !loginInfo.token) {
    //   // 提示未登录,跳转到登录页,终止
    //   this.$toast('你还未登录')
    //   this.$router.push('/login')
    //   return
    // }
    // 应该得到用户信息
    this.SETUSERINFO()
  }
}
</script>

<style lang="less" scoped>
.my {
  overflow: auto;
  .top {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 260px;
    background-color: #c90030;
    padding: 0 20px;
    display: flex;
    .main {
      width: 100%;
      color: #fff;
      font-size: 20px;
      font-weight: 600;
      margin-top: 30px;
      .qianm {
        float: left;
        font-size: 12px;
        color: #edb1c0;
        margin-top: 8px;
        font-weight: 100;
      }
    }
    .imgMe {
      position: absolute;
      width: 55px;
      height: 55px;
      background-color: #c7697e;
      border-radius: 50%;
      right: 30px;
      top: 32px;

      img {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
      }
    }
    .count {
      width: 100%;
      display: flex;
      justify-content: space-between;

      font-size: 18px;
      margin-top: 90px;
      padding: 0px;
      .item {
        // float: left;
        align-items: center;
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        // flex: 1;
        text-align: center;
        line-height: 23px;
        // width: 25%;
        .leij {
          font-size: 12px;
          color: #edb1c0;
          font-weight: 300;
        }
      }
    }
  }
  .gangw {
    overflow: hidden;
    width: 90%;
    height: 50px;
    padding: 0 20px;
    margin-bottom: 20px;
    background-color: #ffffff;
    position: absolute;
    top: 230px;
    left: 0;
    border: 0px;
    right: 0px;
    margin: auto;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid #fbfbfc;

    /deep/ .van-cell--clickable {
      width: 100%;
      border-radius: 10px 10px 0 0;
      padding-left: 0;
      padding-right: 0;
    }
  }
  .mianj {
    padding: 0 20px;
    height: 140px;
    width: 100%;
    border-bottom: 1px solid #fbfbfc;
    margin-bottom: 10px;
    .item {
      margin-top: -12px;
      font-size: 12px;
      color: #b7b7bf;
      text-align: center;
      float: left;
      width: 33%;
      i {
        color: #97d2e2;
        font-style: normal;
      }
      .shuzi {
        font-size: 18px;
        color: #000000;
        margin: 8px 0;
      }
      .zongs,
      shuzi {
        color: #666880;
      }
    }
  }
  .footer {
    /deep/ .van-cell--clickable {
      border: 0;
      vertical-align: middle;
    }
    .mete {
      margin-left: 5px;
      vertical-align: middle;
    }
  }
  .cot {
    margin-left: 6px;
    vertical-align: middle;
  }
  .gang {
    color: red;
    font-size: 18px;
    vertical-align: middle;
  }
  .mian {
    color: pink;
    font-size: 20px;
    vertical-align: middle;
  }
  .xiao {
    color: skyblue;
    font-size: 20px;
    vertical-align: middle;
  }
  .ti {
    color: steelblue;
    font-size: 20px;
    vertical-align: middle;
  }
  .qi {
    color: green;
    font-size: 20px;
    vertical-align: middle;
  }
  .cuo {
    color: tomato;
    font-size: 20px;
    vertical-align: middle;
  }
  /deep/ .zuo {
    text-align: left;
  }
  /deep/ .you {
    text-align: right;
  }
}
</style>
